<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        #app {
            margin-top: 200px;
            width: 60%;
            left: 20%;
            position: absolute;
        }
    </style>

</head>

<body>
    <div class="table-responsive" id="app">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th onclick="de()">
                        <a href="javascript:void(0);">删除</a>
                    </th>
                    <th v-for="the in thead">{{the.top}}</th>

                </tr>
            </thead>
            <tbody v-for="tob in tobody">
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>{{tob.top0}}</td>
                    <td>{{tob.top1}}</td>
                    <td>{{tob.top2}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            thead: [{
                "top": "序号"
            }, {
                "top": "名称"
            }, {
                "top": "年龄"
            }, ],
            tobody: [{
                "top0": "1",
                "top1": "马琳",
                "top2": "20",
            }, {
                "top0": "2",
                "top1": "二郎神",
                "top2": "28",
            }, {
                "top0": "3",
                "top1": "耶稣",
                "top2": "14",
            }, {
                "top0": "4",
                "top1": "马小跳",
                "top2": "16",
            }]
        }
    });

    function de() {
        $(".checkbox").attr("checked", false);
    }
</script>

</html>